<template>
	<div>
		<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
			<el-table-column label="渠道码" prop="channelCode">
			</el-table-column>
			<el-table-column label="落地页码" prop="landinCode">
			</el-table-column>
			<el-table-column label="落地页名称" prop="name">
			</el-table-column>
			<el-table-column label="版本">
				<template slot-scope="scope">
					<el-select v-model="scope.row.ver" placeholder="请选择" @change="switchLandinVer(scope.row)">
						<el-option v-for="item in landinVerList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="微信号">
				<template slot-scope="scope">
					<el-input v-model="scope.row.vxNumber" @change="changeVX(scope.row)"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="地址" prop="fileUrl">
			</el-table-column>
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-row style="height: 80px;">
			当前页数：{{page}}
			<el-button type="primary" size="small" :disabled="page==1" @click="changePage(0)">上一页</el-button>
			<el-button type="primary" size="small" :disabled="pageOver" @click="changePage(1)">下一页</el-button>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				count: 10,
				tableData: [],
				search: '',
				page: 1,
				landinVerList: this.$constData.landinVerList,
				pageOver:true
			}
		},
		methods: {
			// 修改微信号
			changeVX(info){
				let cnt = {
					vxNumber: info.vxNumber,
					channelCode: info.channelCode,
					landinCode: info.landinCode,
					ver: info.ver
				}
				this.$api.changeVX(cnt, (res) => {
					if(res.data.rc == this.$util.RC.SUCCESS) {
						this.$message({
							type: 'success',
							message: '微信号修改成功!'
						});
					}else {
						this.$message.error('微信号修改失败');
					}
				})
			},
			// 切换落地页版本
			switchLandinVer(info) {
				let cnt = {
					channelCode: info.channelCode,
					landinCode: info.landinCode,
					ver: info.ver
				}
				this.$api.switchLandinVer(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.$message({
							type: 'success',
							message: '版本切换成功!'
						});
						this.getLandinList()
					} else {
						this.$message.error('版本切换失败!');
					}
				});
			},
			// 编辑
			handleEdit(info) {
				this.$router.push({
					path: '/editLandin',
					name: 'editLandin',
					params: {
						info: info
					}
				})
			},
			// 删除
			handleDelete(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let cnt = {
						channelCode: row.channelCode,
						landinCode: row.landinCode
					}
					this.$api.deleteLandin(cnt, (res) => {
						if (res.data.rc == this.$util.RC.SUCCESS) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getLandinList()
						} else {
							this.$message.error('删除失败!');
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 获取落地页列表
			getLandinList() {
				let cnt = {
					count: this.count,
					offset: (this.page - 1) * this.count
				}
				this.$api.getLandinList(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.tableData = this.$util.tryParseJson(res.data.c)
						this.loading = false
					} else {
						this.tableData = []
					}
					if (this.tableData.length < this.count) {
						this.pageOver = true
					} else {
						this.pageOver = false
					}
				})
			},
			// 翻页
			changePage(e) {
				this.loading = true
				if (e) {
					console.log(e)
					this.page += 1
				} else {
					console.log(e)
					this.page -= 1
				}
				localStorage.setItem("page_contentList", this.page)
				// 获取落地页列表
				this.getLandinList()
			},
		},
		mounted() {
			this.getLandinList()
		}
	}
</script>

<style>
</style>
